<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />

    <title>Random quotes</title>

    <style>
      html {
        font-family: sans-serif;
      }

      h1 {
        letter-spacing: 2px;
      }

      p {
        line-height: 1.6;
      }

      section {
        padding: 10px;
        width: 400px;
        background: #666;
        text-shadow: 1px 1px 1px black;
        color: white;
        min-height: 150px;
      }
    </style>
  </head>

  <body>
    <section aria-live="assertive" aria-atomic="true">
      <h1>Random quote</h1>
      <blockquote>
        <p></p>
      </blockquote>
    </section>
    <script>
      const quotePara = document.querySelector("section p");

      let quoteJson;

      getQuotes("quotes.json").then((quotes) => {
        quoteJson = quotes;
        window.setInterval(showQuote, 10000);
      });

      async function getQuotes(url, callback) {
        const response = await fetch(url);
        return response.json();
      }

      function populateJson(response) {
        quoteJson = response;
      }

      function showQuote() {
        let random = Math.floor(Math.random() * 25);
        quotePara.textContent = `${quoteJson[random].quote} -- ${quoteJson[random].author}`;
      }
    </script>
  </body>
</html>
